<template>
    <!-- 设备管理-设备信息 -->
    <div class="mainContent">
        <div class="search">
            <div class="search_item">
                <div class="list inputItem">
                    <span>关键字搜索:</span>
                    <Input v-model="keyword" placeholder="请输入设备编号" style="width: 250px" maxlength="15" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <span>设备类型:</span>
                    <!-- <Cascader
                        :data="arr"
                        v-model="machType"
                        @on-change="getmachTypes"
                        filterable
                        trigger="hover"
                        placeholder="请选择设备类型"
                        style="width: 250px"
                    ></Cascader>
                    <input type="password" autocomplete="new-password" style="display: none" />-->
                    <!-- <el-cascader
                        :options="arr"
                        :props="{ checkStrictly: true }"
                        @change="getmachTypes"
                        filterable
                        clearable
                        placeholder="请选择设备类型"
                        style="width: 250px">
                    </el-cascader> -->
                    <Select v-model="machType" style="width: 250px" placeholder="请选择在场状态" @on-change="getmachTypes">
                        <Option v-for="item in arr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                </div>
                <div class="list">
                    <span>在场状态:</span>
                    <Select v-model="state" style="width: 250px" placeholder="请选择在场状态" @on-change="getstateFlag">
                        <Option v-for="item in stateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>

                <div class="list">
                    <span>持有单位:</span>
                    <Select v-model="corpId" style="width: 250px" placeholder="请选择持有单位" @on-change="getCorpFn" filterable>
                        <Option v-for="item in corpList" :value="item.corpId" :key="item.corpId" >{{ item.corpName }}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <!-- <div class="list">
                    <span>入网状态:</span>
                    <Select v-model="bindFlag" style="width: 250px" placeholder="请选择入网状态" @on-change="getbindFlag">
                        <Option v-for="item in bindFlaglist" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div> -->
                <div class="list">
                    <span>网络状态:</span>
                    <Select v-model="netState" style="width: 250px" placeholder="请选择网络状态" @on-change="getnetState">
                        <Option v-for="item in netStatelist" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <!-- <div class="list">
                    <span>实时状态:</span>
                    <Select v-model="workState" style="width: 250px" placeholder="请选择实时状态" @on-change="getworkState">
                        <Option v-for="item in workStateList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div> -->
                <input type="text" class="intBox" style="display: none" />
                <div class="list">
                    <el-button type="primary" @click="searchAll" style="border-radius: 2px;padding: 10px 25px;">搜索</el-button>
                    <el-button type="info" @click="clear" style="margin-left: 20px;border-radius: 2px;padding: 10px 25px;" plain>重置</el-button>
                </div>
            </div>
        </div>
        <div class="tabBox">
            <div class="down">
                <el-button
                    :type="!btnList.includes('mach/list/add') ? 'info' : 'primary'"
                    @click="updateRow(0)"
                    :disabled="!btnList.includes('mach/list/add')"
                    style="border-radius: 2px;padding: 10px 20px;">
                    + 添加设备
                </el-button>
                <el-button
                    :type="
                        !btnList.includes('mach/list/exp') ? 'info' : 'primary'"
                    :disabled="!btnList.includes('mach/list/exp')"
                    @click="getAllexport"
                    style="
                        margin-left: 20px;
                        background: #1891FF;
                        border-radius: 2px;
                        padding: 10px 20px;
                    "
                    v-preventReClick="1500"
                    >全部导出</el-button
                >
            </div>
            <div class="tableList" v-if="list.length > 0">
                <div
                    class="item"
                    v-for="(item, index) in list"
                    :key="item.equipId"
                    @click.stop="getDetails(index, list, 1)"
                >
                    <div class="top">
                        <div class="top_item">
                            <img
                                v-if="item.state == 0"
                                src="../../assets/images/mach/list/equip_enter.svg"
                                alt=""
                            />
                            <img
                                v-if="item.state == 1"
                                src="../../assets/images/mach/list/mach_enter_active.svg"
                                alt=""
                            />
                            <span
                                v-if="item.state == 0"
                                style="color: #959ea2"
                                >退场</span
                            >
                            <span v-else style="color: #1891FF"
                                >进场</span
                            >
                        </div>
                        <!-- <div class="top_item">
                            <img
                                v-if="item.bindFlag == 0"
                                src="../../assets/images/mach/list/equip_bindFlag.svg"
                                alt=""
                            />
                            <img
                                v-if="item.bindFlag == 1"
                                src="../../assets/images/mach/list/mach_bindFlag_active.svg"
                                alt=""
                            />
                            <span
                                v-if="item.bindFlag == 0"
                                style="color: #959ea2"
                                >未入网</span
                            >
                            <span v-else style="color: #1891FF"
                                >已入网</span
                            >
                        </div>
                        <div class="top_item">
                            <img
                                v-if="item.bindFlag == 0"
                                src="../../assets/images/mach/list/equip_state.svg"
                                alt=""
                            />
                            <span
                                v-if="item.bindFlag == 0"
                                style="color: #959ea2"
                                >—
                            </span>
                            <img
                                v-if="
                                    item.netState == 0 &&
                                    item.bindFlag == 1
                                "
                                src="../../assets/images/mach/list/equip_state.svg"
                                alt=""
                            />
                            <img
                                v-if="
                                    item.netState == 1 &&
                                    item.bindFlag == 1
                                "
                                src="../../assets/images/mach/list/mach_state_active.svg"
                                alt=""
                            />
                            <span
                                v-if="
                                    item.netState == 0 &&
                                    item.bindFlag == 1
                                "
                                style="color: #959ea2"
                                >离线</span
                            >
                            <span
                                v-if="
                                    item.netState == 1 &&
                                    item.bindFlag == 1
                                "
                                style="color: #1891FF"
                                >在线</span
                            >
                        </div>
                        <div class="top_item">
                            <img
                                v-if="
                                    item.bindFlag == 1 &&
                                    item.netState == 1 &&
                                    item.workState == 3
                                "
                                src="../../assets/images/mach/list/mach_work_active.svg"
                                alt=""
                            />
                            <img
                                v-else
                                src="../../assets/images/mach/list/mach_work.svg"
                                alt=""
                            />
                            <span
                                v-if="
                                    item.netState == 0 ||
                                    item.bindFlag == 0
                                "
                                style="color: #959ea2"
                                >—
                            </span>
                            <span
                                v-if="
                                    item.bindFlag == 1 &&
                                    item.netState == 1 &&
                                    item.workState == 1
                                "
                                style="color: #959ea2"
                                >停机</span
                            >
                            <span
                                v-if="
                                    item.bindFlag == 1 &&
                                    item.netState == 1 &&
                                    item.workState == 2
                                "
                                style="color: #959ea2"
                                >怠机</span
                            >
                            <span
                                v-if="
                                    item.bindFlag == 1 &&
                                    item.netState == 1 &&
                                    item.workState == 3
                                "
                                style="color: #1891FF"
                                >工作</span
                            >
                            <span
                                v-if="
                                    item.bindFlag == 1 &&
                                    item.netState == 1 &&
                                    item.workState == 4
                                "
                                style="color: #959ea2"
                                >休眠</span
                            >
                        </div> -->
                    </div>
                    <div class="bottom">
                        <div class="box">
                            <div class="left">
                                <img
                                    v-if="
                                        item.imgList &&
                                        item.imgList.length > 0
                                    "
                                    :src="item.imgList[0]"
                                    alt=""
                                />
                                <img
                                    v-else
                                    :src="imgUrl"
                                    alt=""
                                    class="imgNone"
                                />
                            </div>
                            <div class="right">
                                <p>
                                    <span
                                        >类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span
                                    >
                                    <span>{{
                                        item.machTypeName
                                            ? item.machTypeName
                                            : "—"
                                    }}</span>
                                </p>
                                <p>
                                    <span
                                        >编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</span
                                    >
                                    <span>{{
                                        item.machCode
                                            ? item.machCode
                                            : "—"
                                    }}</span>
                                </p>
                                <p>
                                    <span>品牌型号</span>
                                    <span>{{
                                        item.machModelName
                                            ? item.machModelName
                                            : "—"
                                    }}</span>
                                </p>
                                <p>
                                    <span>持有单位</span>
                                    <span>{{
                                        item.corpName
                                            ? item.corpName
                                            : "—"
                                    }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <el-button
                            style="
                                padding: 5px 15px;
                                background: #1891ff;
                            "
                            size="mini"
                            type="primary"
                            v-preventReClick="1500"
                            :style="
                                !btnList.includes('mach/list/del')
                                    ? 'color:#C0C4CC'
                                    : 'color:#fff'
                            "
                            :disabled="
                                !btnList.includes('mach/list/del')
                            "
                            @click.stop="remove(index, list)"
                            >删除</el-button
                        >
                        <el-button
                            v-if="item.state == 1"
                            style="
                                padding: 5px 15px;
                                background: #1891ff;
                            "
                            size="mini"
                            type="primary"
                            @click.stop="outer(index, list)"
                            v-preventReClick="1500"
                            >退场</el-button
                        >
                        <el-button
                            v-if="item.state == 0 || !item.state"
                            style="
                                padding: 5px 15px;
                                background: #1891ff;
                            "
                            size="mini"
                            type="primary"
                            @click.stop="enter(index, list)"
                            v-preventReClick="1500"
                            >进场</el-button
                        >
                        <el-button
                            style="
                                padding: 5px 15px;
                                background: #1891ff;
                            "
                            size="mini"
                            type="primary"
                            @click.stop="getDetails(index, list, 1)"
                            v-preventReClick="1500"
                            >详情</el-button
                        >
                    </div>
                </div>
            </div>
            <div class="no_lsit" v-else>
                <img
                    src="./../../assets/images/common/rotary_nodata.png"
                    alt=""
                />
            </div>
            <div class="clearfix"  >
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        @on-change="pageChange"
                    ></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="modal"
            title="添加设备"
            width="1000px"
            :mask-closable="false"
            class-name="addModal"
        >
            <div class="addMsg">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>基本信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item">
                                    <span class="tip">*</span>
                                    <span class="span">设备类型:</span>
                                    <Cascader
                                        :data="arr"
                                        v-model="selectedOptions"
                                        @on-change="handleChange"
                                        filterable
                                        trigger="hover"
                                        placeholder="请选择设备类型"
                                        style="width: 200px"
                                    ></Cascader>
                                </div>
                                <div class="item">
                                    <span class="tip">*</span>
                                    <span class="span">设备编号:</span>
                                    <Input
                                        v-model="mach.machCode"
                                        placeholder="请输入设备编号"
                                        show-word-limit
                                        :maxlength="maxlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">品牌型号:</span>
                                    <Input
                                        v-model="mach.machModelName"
                                        placeholder="请输入品牌型号"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                                <div class="item">
                                    <span class="span">设备名称:</span>
                                    <Input
                                        v-model="assetCode"
                                        placeholder="请输入设备名称"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">持有单位:</span>
                                    <Select
                                        v-model="mach.corpId"
                                        style="width: 200px"
                                        @on-change="getCorpIdtype"
                                        remote
                                        filterable
                                        placeholder="请选择持有单位"
                                    >
                                        <Option
                                            v-for="item in corpList"
                                            :value="item.corpId"
                                            :key="item.corpId"
                                            >{{ item.corpName }}</Option
                                        >
                                    </Select>
                                </div>
                                <div class="item">
                                    <span class="span">使用位置:</span>
                                    <Input
                                        v-model="partName"
                                        placeholder="请输入使用位置"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">累计工时:</span>
                                    <Input
                                        v-model="mach.totalWorkHours"
                                        placeholder="请输入累计工时"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                    <i
                                        style="
                                            font-style: normal;
                                            margin-left: 8px;
                                        "
                                        >H</i
                                    >
                                </div>

                                <div class="item">
                                    <span class="span">进场时间:</span>
                                    <DatePicker
                                        transfer
                                        type="date"
                                        placeholder="请选择日期"
                                        style="width: 200px"
                                        format="yyyy-MM-dd"
                                        @on-change="getEnterTime"
                                        v-model="enterTime"
                                        :options="outerTimeOptions"
                                        :clearable="false"
                                    ></DatePicker>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">生产厂家:</span>
                                    <Input
                                        v-model="manufacturer"
                                        placeholder="请输入生产厂家"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                                <div class="item">
                                    <span class="span">出厂日期:</span>
                                    <DatePicker
                                        transfer
                                        type="date"
                                        placeholder="请选择日期"
                                        style="width: 200px"
                                        format="yyyy-MM-dd"
                                        @on-change="getDeliveryTime"
                                        :options="deliveryTimeOptions"
                                        v-model="mach.deliveryTime"
                                        :clearable="false"
                                    ></DatePicker>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">设备ID:</span>
                                    <Input
                                        v-model="deliveryCode"
                                        placeholder="请输入设备ID"
                                        show-word-limit
                                        :maxlength="limitlength"
                                        style="width: 200px"
                                        clearable
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top: 15px">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>操作手</span>
                            <i
                                class="el-icon-circle-plus-outline add"
                                @click="addOperEmp"
                                v-show="operEmpList.length === 3 ? false : true"
                            ></i>
                        </h2>
                    </div>
                    <div class="operEmpList" v-if="operEmpList.length > 0">
                        <div
                            class="item"
                            v-for="(item, index) in operEmpList"
                            :key="index"
                        >
                            <div
                                class="item_close"
                                @click="removeOperEmp(index, operEmpList)"
                            >
                                <Icon
                                    type="ios-close-circle"
                                    style="color: #1891FF; font-size: 20px"
                                />
                            </div>
                            <div class="item_emp">
                                <span>姓 名:</span>
                                <Input
                                    v-model="item.operEmpName"
                                    placeholder="请输入"
                                    style="width: 200px"
                                    clearable
                                />
                                <input
                                    type="password"
                                    autocomplete="new-password"
                                    style="display: none"
                                />
                            </div>
                            <div class="item_emp">
                                <span>电 话:</span>
                                <Input
                                    v-model="item.phone"
                                    placeholder="请输入"
                                    style="width: 200px"
                                    clearable
                                />
                                <input
                                    type="password"
                                    autocomplete="new-password"
                                    style="display: none"
                                />
                            </div>
                            <div class="item_emp">
                                <span>证件号:</span>
                                <Input
                                    v-model="item.operEmpCert"
                                    placeholder="请输入"
                                    style="width: 200px"
                                    clearable
                                />
                                <input
                                    type="password"
                                    autocomplete="new-password"
                                    style="display: none"
                                />
                            </div>
                        </div>
                    </div>
                    <div
                        class="none_data"
                        v-else
                        style="
                            width: 98%;
                            height: 180px;
                            margin: auto;
                            text-align: center;
                            line-height: 180px;
                            font-size: 20px;
                        "
                    >
                        暂无数据
                    </div>
                </div>
                <div class="info" style="margin-top: 15px">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备图片</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="imgList">
                            <el-upload
                                v-if="imgList.length >= 0"
                                class="avatar-uploader"
                                :headers="headers"
                                :action="
                                    $axios.defaults.baseURL +
                                    '/ms/api/v1/mach/uploadImg'
                                "
                                accept="image/png, image/jpg, image/jpeg"
                                :show-file-list="false"
                                :on-success="imgFirstSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img
                                    v-if="imageFirstUrl"
                                    :src="imageFirstUrl"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    v-if="imageFirstUrl"
                                    class="item_close"
                                    @click.stop="removeImg(0)"
                                >
                                    <Icon
                                        type="ios-close-circle"
                                        style="color: red; font-size: 20px"
                                    />
                                </div>
                            </el-upload>
                            <el-upload
                                v-if="imgList.length >= 1"
                                class="avatar-uploader"
                                :headers="headers"
                                :action="
                                    $axios.defaults.baseURL +
                                    '/ms/api/v1/mach/uploadImg'
                                "
                                :show-file-list="false"
                                :on-success="imgTwoSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img
                                    v-if="imageTwoUrl"
                                    :src="imageTwoUrl"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    v-if="imageTwoUrl"
                                    class="item_close"
                                    @click.stop="removeImg(1)"
                                >
                                    <Icon
                                        type="ios-close-circle"
                                        style="color: red; font-size: 20px"
                                    />
                                </div>
                            </el-upload>
                            <el-upload
                                v-if="imgList.length >= 2"
                                class="avatar-uploader"
                                :headers="headers"
                                :action="
                                    $axios.defaults.baseURL +
                                    '/ms/api/v1/mach/uploadImg'
                                "
                                :show-file-list="false"
                                :on-success="imgThreeSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img
                                    v-if="imageThreeUrl"
                                    :src="imageThreeUrl"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    v-if="imageThreeUrl"
                                    class="item_close"
                                    @click.stop="removeImg(2)"
                                >
                                    <Icon
                                        type="ios-close-circle"
                                        style="color: red; font-size: 20px"
                                    />
                                </div>
                            </el-upload>
                            <el-upload
                                v-if="imgList.length >= 3"
                                class="avatar-uploader"
                                :headers="headers"
                                :action="
                                    $axios.defaults.baseURL +
                                    '/ms/api/v1/mach/uploadImg'
                                "
                                :show-file-list="false"
                                :on-success="imgFourSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img
                                    v-if="imageFourUrl"
                                    :src="imageFourUrl"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    v-if="imageFourUrl"
                                    class="item_close"
                                    @click.stop="removeImg(3)"
                                >
                                    <Icon
                                        type="ios-close-circle"
                                        style="color: red; font-size: 20px"
                                    />
                                </div>
                            </el-upload>
                            <el-upload
                                v-if="imgList.length >= 4"
                                class="avatar-uploader"
                                :headers="headers"
                                :action="
                                    $axios.defaults.baseURL +
                                    '/ms/api/v1/mach/uploadImg'
                                "
                                :show-file-list="false"
                                :on-success="imgLastSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img
                                    v-if="imageLastUrl"
                                    :src="imageLastUrl"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                                <div
                                    v-if="imageLastUrl"
                                    class="item_close"
                                    @click.stop="removeImg(4)"
                                >
                                    <Icon
                                        type="ios-close-circle"
                                        style="color: red; font-size: 20px"
                                    />
                                </div>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="submitAll"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false"
            class-name="detailsModal"
        >
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(4)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="detele"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="unbindModal"
            title="解绑设备"
            width="360px;"
            :mask-closable="false"
            class-name="detailsModal"
        >
            <div style="margin: 10px">确定要解绑这台设备？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(5)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="unbind"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="enterModal"
            title="设备进场"
            width="360px;"
            :mask-closable="false"
            class-name="detailsModal"
        >
            <div style="margin: 10px">是否确定所选设备进场？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(6)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="enterSumbit"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="outerModal"
            title="设备退场"
            width="360px;"
            :mask-closable="false"
            class-name="detailsModal"
        >
            <div style="margin: 10px">是否确定所选设备退场？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(7)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="outerSumbit"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="detailsModal"
            :title="isAdd ? '设备详情' : '设备编辑'"
            width="1000px"
            :mask-closable="false"
            class-name="detailsModal"
        >
            <Tabs v-model="detailActiveName">
                <TabPane label="设备信息" name="1">
                    <div
                        class="detailMsg"
                        style="position: relative"
                        v-if="isAdd"
                    >
                        <div class="info">
                            <!-- <div class="qrCode">
                                <div class="img">
                                    <img
                                        :src="qrCodeSrc"
                                        alt
                                        style="text-align: center"
                                    />
                                </div>
                                <div
                                    class="btn"
                                    style="
                                        text-align: center;
                                        margin-top: 10px;
                                        margin-bottom: 10px;
                                    "
                                >
                                    <el-button
                                        @click="downloadQRCode"
                                        type="primary"
                                        round
                                        size="small"
                                        plain
                                        >下载二维码</el-button
                                    >
                                </div>
                            </div> -->
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>基本信息</span>
                                    <i
                                        class="el-icon-edit edit"
                                        @click="edit_btn"
                                        v-if="
                                            btnList.includes('mach/list/edit')
                                        "
                                    ></i>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left">
                                    <div class="list">
                                        <div class="item">
                                            <span>设备类型:</span>
                                            <span>{{
                                                detailsObj.machTypeName
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>设备编号:</span>
                                            <Tooltip
                                                transfer
                                                :content="
                                                    detailsObj.machCode
                                                        ? detailsObj.machCode
                                                        : '—'
                                                "
                                                placement="top-start"
                                                max-width="200"
                                            >
                                                <div
                                                    style="
                                                        width: 140px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        cursor: pointer;
                                                        color: #58595a;
                                                        margin-top: 4px;
                                                    "
                                                >
                                                    {{
                                                        detailsObj.machCode
                                                            ? detailsObj.machCode
                                                            : "—"
                                                    }}
                                                </div>
                                            </Tooltip>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>品牌型号:</span>
                                            <span>{{
                                                detailsObj.machModelName
                                                    ? detailsObj.machModelName
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>设备名称:</span>
                                            <span>{{
                                                assetCode ? assetCode : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>持有单位:</span>
                                            <Tooltip
                                                transfer
                                                :content="
                                                    detailsObj.corpName
                                                        ? detailsObj.corpName
                                                        : '—'
                                                "
                                                placement="top-start"
                                                max-width="200"
                                            >
                                                <div
                                                    style="
                                                        width: 140px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        cursor: pointer;
                                                        margin-top: 4px;
                                                    "
                                                >
                                                    {{
                                                        detailsObj.corpName
                                                            ? detailsObj.corpName
                                                            : "—"
                                                    }}
                                                </div>
                                            </Tooltip>
                                        </div>
                                        <div class="item">
                                            <span>使用位置:</span>
                                            <span>{{
                                                partName ? partName : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>累计工时:</span>
                                            <span>{{
                                                detailsObj.totalWorkHours
                                                    ? detailsObj.totalWorkHours +
                                                      "h"
                                                    : "—"
                                            }}</span>
                                        </div>

                                        <div class="item">
                                            <span>进场时间:</span>
                                            <span>{{
                                                detailsObj.enterTime
                                                    ? detailsObj.enterTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>生产厂家:</span>
                                            <span>{{
                                                manufacturer
                                                    ? manufacturer
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>设备ID:</span>
                                            <span>{{
                                                deliveryCode
                                                    ? deliveryCode
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>出厂时间:</span>
                                            <span>{{
                                                detailsObj.deliveryTime
                                                    ? detailsObj.deliveryTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="item" v-if="stateFlag != 1">
                                            <span>退场时间:</span>
                                            <span>{{
                                                detailsObj.outerTime
                                                    ? detailsObj.outerTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info" style="margin-top: 15px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>操作手信息</span>
                                </h2>
                            </div>
                            <div
                                class="operEmpList"
                                v-if="detailsObj.operEmpList.length > 0"
                            >
                                <div
                                    class="item"
                                    v-for="(
                                        item, index
                                    ) in detailsObj.operEmpList"
                                    :key="index"
                                >
                                    <div class="img">
                                        <img
                                            :src="peoImg"
                                            alt=""
                                            style="width: 100%; height: 100%"
                                        />
                                    </div>
                                    <div class="operEmpInfo">
                                        <div class="itemInfo">
                                            <span>姓名</span>
                                            <span>{{
                                                item.operEmpName
                                                    ? item.operEmpName
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="itemInfo">
                                            <span>电话</span>
                                            <span>{{
                                                item.phone ? item.phone : "—"
                                            }}</span>
                                        </div>
                                        <div class="itemInfo">
                                            <span>证件</span>
                                            <span>{{
                                                item.operEmpCert
                                                    ? item.operEmpCert
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="none_data"
                                v-else
                                style="
                                    width: 98%;
                                    height: 150px;
                                    margin: auto;
                                    text-align: center;
                                    line-height: 150px;
                                    font-size: 20px;
                                "
                            >
                                暂无数据
                            </div>
                        </div>
                        <div class="info" style="margin-top: 15px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>设备图片</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div
                                    class="imgList"
                                    style="margin-top: 10px"
                                    v-if="
                                        detailsObj.imgList &&
                                        detailsObj.imgList.length > 0
                                    "
                                >
                                    <el-image
                                        v-for="(
                                            item, index
                                        ) in detailsObj.imgList"
                                        :key="index"
                                        :src="item"
                                        style="
                                            width: 160px;
                                            height: 110px;
                                            margin-right: 20px;
                                        "
                                    ></el-image>
                                </div>
                                <div
                                    class="none_data"
                                    v-else
                                    style="
                                        width: 98%;
                                        height: 150px;
                                        margin: auto;
                                        text-align: center;
                                        line-height: 150px;
                                        font-size: 20px;
                                    "
                                >
                                    暂无图片
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="addMsg" v-if="!isAdd">
                        <div class="info">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>基本信息</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left">
                                    <div class="list">
                                        <div class="item">
                                            <span class="tip">*</span>
                                            <span class="span">设备类型:</span>
                                            <Cascader
                                                :data="arr"
                                                v-model="selectedOptions"
                                                @on-change="handleChange"
                                                filterable
                                                trigger="hover"
                                                placeholder="请选择设备类型"
                                                style="width: 200px"
                                            ></Cascader>
                                        </div>
                                        <div class="item">
                                            <span class="tip">*</span>
                                            <span class="span">设备编号:</span>
                                            <Input
                                                v-model="mach.machCode"
                                                placeholder="请输入设备编号"
                                                show-word-limit
                                                :maxlength="maxlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span class="span">品牌型号:</span>
                                            <Input
                                                v-model="mach.machModelName"
                                                placeholder="请输入品牌型号"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                        <div class="item">
                                            <span class="span">设备名称:</span>
                                            <Input
                                                v-model="assetCode"
                                                placeholder="请输入设备名称"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span class="span">持有单位:</span>
                                            <Select
                                                v-model="mach.corpId"
                                                style="width: 200px"
                                                @on-change="getCorpIdtype"
                                                remote
                                                filterable
                                                placeholder="请选择持有单位"
                                            >
                                                <Option
                                                    v-for="item in corpList"
                                                    :value="item.corpId"
                                                    :key="item.corpId"
                                                    >{{ item.corpName }}</Option
                                                >
                                            </Select>
                                        </div>
                                        <div class="item">
                                            <span class="span">使用位置:</span>
                                            <Input
                                                v-model="partName"
                                                placeholder="请输入使用位置"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span class="span">累计工时:</span>
                                            <Input
                                                v-model="mach.totalWorkHours"
                                                placeholder="请输入累计工时"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                            <i
                                                style="
                                                    font-style: normal;
                                                    margin-left: 8px;
                                                "
                                                >H</i
                                            >
                                        </div>

                                        <div class="item">
                                            <span class="span">进场时间:</span>
                                            <DatePicker
                                                transfer
                                                type="date"
                                                placeholder="请选择日期"
                                                style="width: 200px"
                                                format="yyyy-MM-dd"
                                                @on-change="getEnterTime"
                                                v-model="enterTime"
                                                :options="outerTimeOptions"
                                                :clearable="false"
                                            ></DatePicker>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span class="span">生产厂家:</span>
                                            <Input
                                                v-model="manufacturer"
                                                placeholder="请输入生产厂家"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                        <div class="item">
                                            <span class="span">出厂日期:</span>
                                            <DatePicker
                                                transfer
                                                type="date"
                                                placeholder="请选择日期"
                                                style="width: 200px"
                                                format="yyyy-MM-dd"
                                                @on-change="getDeliveryTime"
                                                :options="deliveryTimeOptions"
                                                v-model="mach.deliveryTime"
                                                :clearable="false"
                                            ></DatePicker>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span class="span">设备ID:</span>
                                            <Input
                                                v-model="deliveryCode"
                                                placeholder="请输入设备ID"
                                                show-word-limit
                                                :maxlength="limitlength"
                                                style="width: 200px"
                                                clearable
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info" style="margin-top: 15px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>操作手</span>
                                    <i
                                        class="el-icon-circle-plus-outline add"
                                        @click="addOperEmp"
                                        v-show="
                                            operEmpList.length === 3
                                                ? false
                                                : true
                                        "
                                    ></i>
                                </h2>
                            </div>
                            <div
                                class="operEmpList"
                                v-if="operEmpList.length > 0"
                            >
                                <div
                                    class="item"
                                    v-for="(item, index) in operEmpList"
                                    :key="index"
                                >
                                    <div
                                        class="item_close"
                                        @click="
                                            removeOperEmp(index, operEmpList)
                                        "
                                    >
                                        <Icon
                                            type="ios-close-circle"
                                            style="
                                                color: #1891FF;
                                                font-size: 20px;
                                            "
                                        />
                                    </div>
                                    <div class="item_emp">
                                        <span>姓 名:</span>
                                        <Input
                                            v-model="item.operEmpName"
                                            placeholder="请输入"
                                            style="width: 200px"
                                            clearable
                                        />
                                        <input
                                            type="password"
                                            autocomplete="new-password"
                                            style="display: none"
                                        />
                                    </div>
                                    <div class="item_emp">
                                        <span>电 话:</span>
                                        <Input
                                            v-model="item.phone"
                                            placeholder="请输入"
                                            style="width: 200px"
                                            clearable
                                        />
                                        <input
                                            type="password"
                                            autocomplete="new-password"
                                            style="display: none"
                                        />
                                    </div>
                                    <div class="item_emp">
                                        <span>证件号:</span>
                                        <Input
                                            v-model="item.operEmpCert"
                                            placeholder="请输入"
                                            style="width: 200px"
                                            clearable
                                        />
                                        <input
                                            type="password"
                                            autocomplete="new-password"
                                            style="display: none"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                class="none_data"
                                v-else
                                style="
                                    width: 98%;
                                    height: 150px;
                                    margin: auto;
                                    text-align: center;
                                    line-height: 150px;
                                    font-size: 20px;
                                "
                            >
                                暂无数据
                            </div>
                        </div>
                        <div class="info" style="margin-top: 15px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>设备图片</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="imgList">
                                    <el-upload
                                        v-if="imgList.length >= 0"
                                        class="avatar-uploader"
                                        :headers="headers"
                                        :action="
                                            $axios.defaults.baseURL +
                                            '/ms/api/v1/mach/uploadImg'
                                        "
                                        accept="image/png, image/jpg, image/jpeg"
                                        :show-file-list="false"
                                        :on-success="imgFirstSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img
                                            v-if="imageFirstUrl"
                                            :src="imageFirstUrl"
                                            class="avatar"
                                        />
                                        <i
                                            v-else
                                            class="
                                                el-icon-plus
                                                avatar-uploader-icon
                                            "
                                        ></i>
                                        <div
                                            v-if="imageFirstUrl"
                                            class="item_close"
                                            @click.stop="removeImg(0)"
                                        >
                                            <Icon
                                                type="ios-close-circle"
                                                style="
                                                    color: red;
                                                    font-size: 20px;
                                                "
                                            />
                                        </div>
                                    </el-upload>
                                    <el-upload
                                        v-if="imgList.length >= 1"
                                        class="avatar-uploader"
                                        :headers="headers"
                                        :action="
                                            $axios.defaults.baseURL +
                                            '/ms/api/v1/mach/uploadImg'
                                        "
                                        :show-file-list="false"
                                        :on-success="imgTwoSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img
                                            v-if="imageTwoUrl"
                                            :src="imageTwoUrl"
                                            class="avatar"
                                        />
                                        <i
                                            v-else
                                            class="
                                                el-icon-plus
                                                avatar-uploader-icon
                                            "
                                        ></i>
                                        <div
                                            v-if="imageTwoUrl"
                                            class="item_close"
                                            @click.stop="removeImg(1)"
                                        >
                                            <Icon
                                                type="ios-close-circle"
                                                style="
                                                    color: red;
                                                    font-size: 20px;
                                                "
                                            />
                                        </div>
                                    </el-upload>
                                    <el-upload
                                        v-if="imgList.length >= 2"
                                        class="avatar-uploader"
                                        :headers="headers"
                                        :action="
                                            $axios.defaults.baseURL +
                                            '/ms/api/v1/mach/uploadImg'
                                        "
                                        :show-file-list="false"
                                        :on-success="imgThreeSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img
                                            v-if="imageThreeUrl"
                                            :src="imageThreeUrl"
                                            class="avatar"
                                        />
                                        <i
                                            v-else
                                            class="
                                                el-icon-plus
                                                avatar-uploader-icon
                                            "
                                        ></i>
                                        <div
                                            v-if="imageThreeUrl"
                                            class="item_close"
                                            @click.stop="removeImg(2)"
                                        >
                                            <Icon
                                                type="ios-close-circle"
                                                style="
                                                    color: red;
                                                    font-size: 20px;
                                                "
                                            />
                                        </div>
                                    </el-upload>
                                    <el-upload
                                        v-if="imgList.length >= 3"
                                        class="avatar-uploader"
                                        :headers="headers"
                                        :action="
                                            $axios.defaults.baseURL +
                                            '/ms/api/v1/mach/uploadImg'
                                        "
                                        :show-file-list="false"
                                        :on-success="imgFourSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img
                                            v-if="imageFourUrl"
                                            :src="imageFourUrl"
                                            class="avatar"
                                        />
                                        <i
                                            v-else
                                            class="
                                                el-icon-plus
                                                avatar-uploader-icon
                                            "
                                        ></i>
                                        <div
                                            v-if="imageFourUrl"
                                            class="item_close"
                                            @click.stop="removeImg(3)"
                                        >
                                            <Icon
                                                type="ios-close-circle"
                                                style="
                                                    color: red;
                                                    font-size: 20px;
                                                "
                                            />
                                        </div>
                                    </el-upload>
                                    <el-upload
                                        v-if="imgList.length >= 4"
                                        class="avatar-uploader"
                                        :headers="headers"
                                        :action="
                                            $axios.defaults.baseURL +
                                            '/ms/api/v1/mach/uploadImg'
                                        "
                                        :show-file-list="false"
                                        :on-success="imgLastSuccess"
                                        :before-upload="beforeAvatarUpload"
                                    >
                                        <img
                                            v-if="imageLastUrl"
                                            :src="imageLastUrl"
                                            class="avatar"
                                        />
                                        <i
                                            v-else
                                            class="
                                                el-icon-plus
                                                avatar-uploader-icon
                                            "
                                        ></i>
                                        <div
                                            v-if="imageLastUrl"
                                            class="item_close"
                                            @click.stop="removeImg(4)"
                                        >
                                            <Icon
                                                type="ios-close-circle"
                                                style="
                                                    color: red;
                                                    font-size: 20px;
                                                "
                                            />
                                        </div>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <TabPane :label="machProductName" name="2">
                    <div class="detailMsg">
                        <div class="info">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>硬件信息</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left" style="width: 85%">
                                    <div
                                        class="sn"
                                        style="
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            margin-top: 20px;
                                        "
                                    >
                                        <span style="width: 70px"
                                            >硬件SN：</span
                                        >
                                        <span
                                            style="width: 250px"
                                            v-if="snFlag == 1 || snFlag == 3"
                                            >{{ sn }}</span
                                        >
                                        <p
                                            style="
                                                margin-right: 10px;
                                                color: transparent;
                                            "
                                            v-if="snFlag == 1 || snFlag == 3"
                                        >
                                            l
                                        </p>
                                        <Input
                                            v-model="bound_sn"
                                            placeholder="请输入硬件SN码"
                                            style="
                                                width: 250px;
                                                margin-right: 10px;
                                            "
                                            v-if="snFlag == 2"
                                            clearable
                                        />
                                        <el-button
                                            type="primary"
                                            size="small"
                                            plain
                                            v-if="
                                                snFlag == 1 &&
                                                btnList.includes(
                                                    'mach/list/bind'
                                                )
                                            "
                                            @click="boundFn"
                                            style="background: #1891FF"
                                            ><span style="color: #fff"
                                                >绑定</span
                                            ></el-button
                                        >
                                        <el-button
                                            type="primary"
                                            size="small"
                                            plain
                                            v-if="snFlag == 2"
                                            @click="boundSumbit"
                                            style="background: #1891FF"
                                            ><span style="color: #fff"
                                                >确定</span
                                            ></el-button
                                        >
                                        <el-button
                                            type="info"
                                            size="small"
                                            plain
                                            @click="cancel(9)"
                                            v-if="snFlag == 2"
                                            style="
                                                background: #e2eafd;
                                                border: 1px solid #1891FF;
                                            "
                                            ><span style="color: #1891FF"
                                                >取消</span
                                            ></el-button
                                        >
                                        <el-button
                                            type="primary"
                                            size="small"
                                            plain
                                            v-if="
                                                snFlag == 3 &&
                                                btnList.includes(
                                                    'mach/list/unbind'
                                                )
                                            "
                                            @click="unbindFn"
                                            style="background: #1891FF"
                                            ><span style="color: #fff"
                                                >解绑</span
                                            ></el-button
                                        >
                                    </div>

                                    <div
                                        class="fuelTank sn"
                                        style="
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            margin-top: 20px;
                                        "
                                    >
                                        <div
                                            class="item"
                                            style="
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: center;
                                            "
                                        >
                                            <span style="width: 70px"
                                                >油箱容积：</span
                                            >
                                            <span
                                                style="width: 80px"
                                                v-if="fuelTankFlag"
                                                >{{
                                                    oilTankVolume
                                                        ? oilTankVolume + "L"
                                                        : "-"
                                                }}</span
                                            >
                                            <Input
                                                v-model="oilTankVolume"
                                                v-if="!fuelTankFlag"
                                                placeholder="请输入"
                                                show-word-limit
                                                :maxlength="4"
                                                style="width: 80px"
                                                clearable
                                            />
                                            <p
                                                style="margin-right: 10px"
                                                v-if="!fuelTankFlag"
                                            >
                                                L
                                            </p>
                                            <!-- <span class="tip">*</span> -->
                                        </div>
                                        <div
                                            class="item"
                                            :style="{
                                                display: 'flex',
                                                'justify-content': 'flex-start',
                                                'align-items': ' center',
                                                'margin-right': fuelTankFlag
                                                    ? '18px'
                                                    : '0',
                                            }"
                                        >
                                            <span>油箱高度：</span>
                                            <span
                                                style="width: 105px"
                                                v-if="fuelTankFlag"
                                                >{{
                                                    oilTankHeight
                                                        ? oilTankHeight + "cm"
                                                        : "-"
                                                }}</span
                                            >
                                            <Input
                                                v-model="oilTankHeight"
                                                v-if="!fuelTankFlag"
                                                placeholder="请输入"
                                                show-word-limit
                                                :maxlength="3"
                                                style="width: 80px"
                                                clearable
                                            />
                                            <p
                                                v-if="!fuelTankFlag"
                                                style="margin-right: 10px"
                                            >
                                                cm
                                            </p>
                                        </div>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            v-if="
                                                fuelTankFlag &&
                                                btnList.includes(
                                                    'mach/list/edit'
                                                )
                                            "
                                            plain
                                            @click="editFuelTank"
                                            style="background: #1891FF"
                                            ><span style="color: #fff"
                                                >编辑</span
                                            ></el-button
                                        >
                                        <el-button
                                            type="primary"
                                            size="small"
                                            v-if="!fuelTankFlag"
                                            plain
                                            @click="submitFuelTank"
                                            style="background: #1891FF"
                                            ><span style="color: #fff"
                                                >确定</span
                                            ></el-button
                                        >
                                        <el-button
                                            type="info"
                                            size="small"
                                            plain
                                            @click="cancel(10)"
                                            v-if="!fuelTankFlag"
                                            style="
                                                background: #e2eafd;
                                                border: 1px solid #1891FF;
                                            "
                                            ><span style="color: #1891FF"
                                                >取消</span
                                            ></el-button
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info" style="margin-top: 20px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>硬件数据</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left" style="width: 100%">
                                    <div
                                        class="list"
                                        style="
                                            width: 100%;
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: flex-start;
                                        "
                                    >
                                        <div
                                            class="item"
                                            style="
                                                flex: 1;
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: flex-start;
                                            "
                                        >
                                            <div
                                                class="img"
                                                style="margin-right: 10px"
                                            >
                                                <img
                                                    src="../../assets/images/mach/common/equip_img.png"
                                                    style="
                                                        width: 190px;
                                                        height: 100px;
                                                    "
                                                    alt=""
                                                    class="img"
                                                />
                                            </div>
                                            <div class="text">
                                                <p style="margin: 30px 0">
                                                    <span>网络状态：</span>
                                                    <span>{{
                                                        detailsObj.netState == 1
                                                            ? "在线"
                                                            : "离线"
                                                    }}</span>
                                                </p>
                                                <p>
                                                    <span>实时状态：</span>
                                                    <span
                                                        v-if="
                                                            detailsObj.netState ==
                                                            0
                                                        "
                                                        >—</span
                                                    >
                                                    <span
                                                        v-if="
                                                            detailsObj.workState ==
                                                                1 &&
                                                            detailsObj.netState !=
                                                                0
                                                        "
                                                        >停机</span
                                                    >
                                                    <span
                                                        v-if="
                                                            detailsObj.workState ==
                                                                2 &&
                                                            detailsObj.netState !=
                                                                0
                                                        "
                                                        >怠机</span
                                                    >
                                                    <span
                                                        v-if="
                                                            detailsObj.workState ==
                                                                3 &&
                                                            detailsObj.netState !=
                                                                0
                                                        "
                                                        >工作</span
                                                    >
                                                    <span
                                                        v-if="
                                                            detailsObj.workState ==
                                                                4 &&
                                                            detailsObj.netState !=
                                                                0
                                                        "
                                                        >休眠</span
                                                    >
                                                    <span
                                                        v-if="
                                                            detailsObj.workState ==
                                                                5 &&
                                                            detailsObj.netState !=
                                                                0
                                                        "
                                                        >错误</span
                                                    >
                                                </p>
                                            </div>
                                        </div>
                                        <div
                                            class="item"
                                            style="
                                                flex: 1;
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: flex-start;
                                                margin-top: -10px;
                                            "
                                        >
                                            <div
                                                class="img"
                                                style="margin-right: 10px"
                                            >
                                                <img
                                                    src="../../assets/images/mach/common/fuelTank.png"
                                                    style="
                                                        width: 130px;
                                                        height: 160px;
                                                    "
                                                    alt=""
                                                    class="img"
                                                />
                                            </div>
                                            <div class="text">
                                                <p style="margin: 30px 0">
                                                    <span>剩余油量：</span>
                                                    <span>{{
                                                        detailsObj.remainOilPercent +
                                                        "%" +
                                                        "≈" +
                                                        detailsObj.remainOil +
                                                        "L"
                                                    }}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="维修保养记录" name="3" v-if="mainTainFlag">
                    <div class="tableList" style="width: 96%; margin: 0 auto">
                        <el-table
                            :data="maintainList"
                            style="width: 100%"
                            :stripe="true"
                        >
                            <el-table-column
                                prop="machCode"
                                label="设备编号"
                                align="center"
                            ></el-table-column>
                            <el-table-column
                                prop="machTypeName"
                                label="设备类型"
                                align="center"
                            ></el-table-column>
                            <el-table-column
                                prop="itemList"
                                label="维修保养项目"
                                align="center"
                                width="150px"
                            >
                                <template slot-scope="scope">
                                    <span
                                        v-for="(item, index) in scope.row
                                            .itemList"
                                        :key="index"
                                        style="margin-right: 10px"
                                        >{{ item.itemName }}
                                        <em
                                            v-if="
                                                index !=
                                                scope.row.itemList.length - 1
                                            "
                                            >、</em
                                        ></span
                                    >
                                </template>
                            </el-table-column>
                            <!-- <el-table-column
                                label="维修保养费用"
                                align="center"
                            >
                                <el-table-column
                                    :label="item.name"
                                    align="center"
                                    v-for="(item, index) in itemPayList"
                                    :key="index"
                                >
                                    <template slot-scope="scope">
                                        <span style="margin-right: 10px" v>{{
                                            scope.row.payList[index]
                                        }}</span>
                                    </template>
                                </el-table-column>
                            </el-table-column> -->
                            <!-- <el-table-column
                                prop="payTotal"
                                label="费用小计"
                                align="center"
                            ></el-table-column> -->
                            <el-table-column
                                prop="maintainUserName"
                                label="保养人"
                                align="center"
                            ></el-table-column>
                            <el-table-column
                                prop="maintainDate"
                                label="保养日期"
                                align="center"
                                width="100px"
                            ></el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        @click.native.prevent="
                                            getMaintainDetails(
                                                scope.$index,
                                                maintainList
                                            )
                                        "
                                        type="text"
                                        size="small"
                                        v-preventReClick="1500"
                                        style="color: #1891FF"
                                        >查看详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="clearfix" v-show="maintainList.length > 0">
                        <div class="float-right">
                            <Page
                                v-if="maintainTotalCount"
                                style="margin: 20px 0; text-align: center"
                                :current.sync="maintainCurrent"
                                :total="maintainTotalCount"
                                :page-size="maintainPageSize"
                                show-elevator
                                show-total
                                @on-change="maintainPageChange"
                            ></Page>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <el-button
                    @click="cancel(8)"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: rgba(46, 104, 253, 0.16);
                        border: 1px solid rgba(46, 104, 253, 0.16);
                    "
                    type="info"
                    size="mini"
                    v-if="!isAdd && detailActiveName == 1"
                    ><span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="submitAll"
                    type="primary"
                    style="
                        padding: 7px 25px;
                        border-radius: 15px;
                        background: #1891ff;
                        border: 1px solid #1891ff;
                    "
                    size="mini"
                    v-preventReClick="1500"
                    v-if="!isAdd && detailActiveName == 1"
                    ><span style="color: #fff">保存</span></el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="detailsmaintainModal"
            title="保养记录详情"
            width="800px;"
            :mask-closable="false"
            class-name="detailsModal"
            :footer-hide="true"
        >
            <div class="keep">
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>设备信息</span>
                    </h2>
                </div>
                <div class="keep_list" style="width: 100%">
                    <div class="keep_item" style="width: 100%">
                        <span>设备名称:</span>
                        <p>{{ machTypeName }}</p>
                    </div>
                </div>
                <div class="keep_list" style="margin-bottom: 10px; width: 100%">
                    <div class="keep_item" style="width: 100%">
                        <span>设备编号:</span>
                        <p>{{ machCode }}</p>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>工作数据</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item" style="width: 100%">
                        <span>工作里程:</span>
                        <p>{{ workMile ? workMile + "KM" : "-" }}</p>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%">
                    <div class="keep_item" style="width: 100%">
                        <span>工作小时:</span>
                        <p>{{ workHour ? workHour + "h" : "-" }}</p>
                    </div>
                </div>
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>维修保养信息</span>
                    </h2>
                </div>
                <div class="keep_list">
                    <div class="keep_item" style="width: 100%">
                        <span>保养人:</span>
                        <p>{{ maintainUserName }}</p>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%">
                    <div class="keep_item" style="width: 100%">
                        <span>保养日期:</span>
                        <p>{{ date }}</p>
                    </div>
                </div>

                <div class="keep_list" style="width: 100%">
                    <div class="keep_item" style="width: 100%">
                        <span>维修保养项目:</span>
                        <p>
                            <span
                                v-for="(item, index) in itemList"
                                :key="index"
                                style="width: auto"
                                >{{ item.itemName }}
                                <em v-if="index != itemList.length - 1"
                                    >、</em
                                ></span
                            >
                        </p>
                    </div>
                </div>
                <!-- <div class="keep_list" style="width: 100%; height: auto">
                    <div
                        class="keep_item"
                        style="
                            width: 100%;
                            height: auto;
                            align-items: flex-start;
                        "
                    >
                        <span>维修保养费用:</span>
                        <div style="width: 650px; height: auto">
                            <div class="item_tag">
                                <el-tabs
                                    v-model="activeTabName"
                                    style="width: 100%"
                                >
                                    <el-tab-pane
                                        v-for="(item, index) in itemPayList"
                                        :label="
                                            item.name +
                                            '(' +
                                            payNumList[index] +
                                            '元' +
                                            ')'
                                        "
                                        :name="item.code"
                                        :key="index"
                                    >
                                        <div
                                            style="
                                                width: 100%;
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                            "
                                        >
                                            <div>
                                                <span>计费方式:</span>
                                                <span
                                                    v-if="
                                                        numMap[index].length > 0
                                                    "
                                                    >明细汇总</span
                                                >
                                                <span v-else>人工汇总</span>
                                            </div>
                                        </div>
                                        <div style="margin-top: 10px">
                                            <div
                                                v-if="numMap[index].length > 0"
                                            >
                                                <div
                                                    v-if="
                                                        numMap[index].length > 0
                                                    "
                                                    class="table"
                                                    style="
                                                        width: 100%;
                                                        height: auto;
                                                    "
                                                >
                                                    <p
                                                        style="
                                                            width: 100%;
                                                            display: flex;
                                                            justify-content: space-between;
                                                        "
                                                        align="center"
                                                    >
                                                        <span
                                                            v-for="(
                                                                val, i
                                                            ) in itemPayList[
                                                                index
                                                            ].details"
                                                            :key="i"
                                                            :style="{
                                                                width:
                                                                    100 /
                                                                        itemPayList[
                                                                            index
                                                                        ]
                                                                            .details
                                                                            .length +
                                                                    '%',
                                                            }"
                                                            >{{ val }}</span
                                                        >
                                                    </p>
                                                    <ul
                                                        style="
                                                            width: 100%;
                                                            list-style: none;
                                                            margin-top: 10px;
                                                        "
                                                    >
                                                        <li
                                                            v-for="(
                                                                arr, j
                                                            ) in numMap[index]"
                                                            :key="j"
                                                            style="
                                                                width: 100%;
                                                                display: flex;
                                                                justify-content: space-between;
                                                                align-items: center;
                                                                margin-bottom: 10px;
                                                            "
                                                        >
                                                            <span
                                                                v-for="(
                                                                    s, x
                                                                ) in arr"
                                                                :key="x"
                                                                style="
                                                                    display: flex;
                                                                    justify-content: center;
                                                                    align-items: center;
                                                                "
                                                                :style="{
                                                                    width:
                                                                        100 /
                                                                            arr.length +
                                                                        '%',
                                                                }"
                                                            >
                                                                {{
                                                                    numMap[
                                                                        index
                                                                    ][j][x]
                                                                }}
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <span
                                                    >费用金额:{{
                                                        payNumList[index]
                                                    }}元</span
                                                >
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <p>
                                <span>合计:</span>
                                <span>{{ payTotal }}元</span>
                            </p>
                        </div>
                    </div>
                </div> -->
                <div
                    class="keep_list"
                    style="width: 100%; height: auto; margin-top: 15px"
                >
                    <div
                        class="keep_item"
                        style="
                            width: 100%;
                            height: auto;
                            align-items: flex-start;
                        "
                    >
                        <span>维修保养说明:</span>
                        <div style="width: 650px; height: auto">
                            <p>
                                {{ maintainRemark }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="keep_list" style="width: 100%; height: auto">
                    <div
                        class="keep_item"
                        style="
                            width: 100%;
                            height: auto;
                            align-items: flex-start;
                        "
                    >
                        <span>维修保养过程:</span>
                        <div style="width: 650px; height: auto">
                            <ul class="ulbox">
                                <li
                                    v-for="(item, index) in fileList"
                                    :key="index"
                                    class="libox"
                                >
                                    <img
                                        :src="item"
                                        alt=""
                                        v-if="
                                            item.includes('jpg') ||
                                            item.includes('png')
                                        "
                                    />
                                    <video
                                        :src="item"
                                        v-if="item.includes('mp4')"
                                        controls="controls"
                                    ></video>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>

        <div class="previewImgModal" v-if="previewImgModal">
            <span class="close" @click="previewImgClose">
                <Icon
                    type="ios-close-circle"
                    style="color: #fff; font-size: 24px"
                />
            </span>
            <img :src="previewImg" alt="" />
        </div>
    </div>
</template>
<script>
import { previewImg } from "@/mixins/previewImg.js";
import {
    getMachQr_V1,
    getMachBind_V1,
    getMachUnBind_V1,
    getMachRemove_V1,
    getMachEnter_V1,
    getMachOuter_V1,
    getMachTypeGetList_V1,
    getCorpList_V1,
    getMachAdd_V1,
    getMachInfo_V1,
    getMachEdit_V1,
    getEditMachTank_V1,
    getMachList_V1,
    getMachExport_V1,
} from "@/api/mach.js";
import {
    getMachmaintainListByMachID,
    getMachmaintainDetail,
    getMachDictDateList,
} from "@/api/keep";
export default {
    mixins: [previewImg],
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            activeTabName: "0",
            mainTainFlag: false,
            machProductName: "",
            detailActiveName: "1",
            stateFlag: "",
            imageLastUrl: "",
            imageTwoUrl: "",
            imageFirstUrl: "",
            imageThreeUrl: "",
            imageFourUrl: "",
            peoImg: require("./../../assets/images/common/noPeo.png"),
            imgUrl: require("./../../assets/images/mach/list/mach_none.png"),
            outerTimeOptions: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            enterTimeOptions: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            deliveryTimeOptions: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            tabActiveName: "1",
            snFlag: 0,
            oilTankVolume: "",
            oilTankHeight: "",
            fuelTankFlag: true,
            t: [],
            list: [],
            keyword: "",
            netState: "",
            /* machType: [], */
            machType: '',
            workState: "",
            deptId: "",
            pageNum: 1,
            pageSize: 8,
            totalCount: "",
            current: 1,
            modal: false,
            isAdd: true,
            boundModal: false,
            deleteModal: false,
            detailsModal: false,
            dialogImageUrl: "",
            dialogVisible: false,
            imgFlag: false,
            bound_sn: "",
            boundId: "",
            unbindId: "",
            qrcodeId: "",
            link: "",
            netStatelist: [
                {
                    id: "0",
                    name: "离线",
                },
                {
                    id: "1",
                    name: "在线",
                },
            ],
            workStateList: [
                {
                    id: "3",
                    name: "工作",
                },
                {
                    id: "1",
                    name: "停机",
                },
                {
                    id: "2",
                    name: "怠机",
                },

                {
                    id: "4",
                    name: "休眠",
                },
            ],
            corpList: [],
            bindFlaglist: [
                {
                    id: "1",
                    name: "已入网",
                },
                {
                    id: "0",
                    name: "未入网",
                },
            ],
            stateList: [
                {
                    id: 1,
                    name: "进场",
                },
                {
                    id: 0,
                    name: "退场",
                },
            ],
            state: "",
            corpId: "",
            imgList: [],
            operEmpList: [],
            machTypeList: [],
            deptIdList: [],
            machList: [],
            enterTime: new Date(),
            mach: {
                corpId: "",
                corpName: "",
                deliveryTime: "",
                outerTime: "",
                deptId: "",
                machCode: "",
                machBrandName: "",
                machModelName: "",
                machTypeName: "",
                totalWorkHours: "",
            },
            snCode: "",
            mach_machType: "",
            mach_machBrand: "",
            mach_machModel: "",
            arr: [],
            brandList: [],
            modelList: [],
            array: [],
            machId: "",
            projectId: "",
            areaId: "",
            deptIds: "",
            o: [],
            x: [],
            s: [],
            v: [],
            selectedOptions: [],
            removeid: "",
            bindFlag: "",
            btnList: [],
            detailsObj: {
                imgList: [],
                operEmpList: [],
            },
            detailsOperEmpList: [],
            detailsIndex: "",
            detailsRows: [],
            unbindModal: false,
            porjectType: "",
            porjectName: "",
            qrCodeSrc: "",
            qrCodeName: "",
            enterModal: false,
            enterId: "",
            outerModal: false,
            outerId: "",
            maxlength: 25,
            limitlength: 32,
            maintainList: [],
            maintainPageNum: 1,
            maintainPageSize: 10,
            maintainTotalCount: "",
            maintainCurrent: 1,
            payList: [],
            itemList: [],
            fileList: [],
            maintainRemark: "",
            workHour: "",
            workMile: "",
            date: "",
            maintainDate: "",
            maintainUserName: "",
            payTotal: "",
            detailsmaintainModal: false,
            machCode: "",
            machTypeName: "",
            itemPayList: [],
            numMap: {},
            payNumList: [],
            assetCode: "",
            deliveryCode: "",
            partName: "",
            manufacturer: "",
            tableList: ["数量", "单价", "总价", "备注"],
        };
    },
    methods: {
        transformList(arr) {
            let list = [];
            for (let i = 0; i < this.itemPayList.length; i++) {
                list[i] = 0;
            }
            for (let i = 0; i < this.itemPayList.length; i++) {
                for (let j = 0; j < arr.length; j++) {
                    if (this.itemPayList[i].name == arr[j].payName) {
                        list[i] = arr[j].payValue;
                    }
                }
            }
            return list;
        },
        getDictList() {
            let params = {
                deptId: this.porjectType,
                dictCode: "maintain_pay",
            };
            getMachDictDateList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.itemPayList = res.data.list;
                        this.itemPayList.forEach((i, index) => {
                            if (i.remark) {
                                i["flag"] = true;
                                i.remark = i.remark.split(",");
                                i["detailNum"] = [];
                            } else {
                                i["flag"] = false;
                            }
                            i["code"] = index.toString();
                        });
                        for (let i = 0; i < this.itemPayList.length; i++) {
                            this.payNumList[i] = 0;
                            this.numMap[i] = [];
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getCode() {
            let list = {};
            for (let i = 0; i < this.$store.state.ruleList.length; i++) {
                if (this.$store.state.ruleList[i].code == "mach") {
                    list = this.$store.state.ruleList[i];
                }
            }
            let itemList = [];
            let itemChildList = [];
            itemList = list.children || [];
            if (itemList.length > 0) {
                for (let i = 0; i < itemList.length; i++) {
                    if (itemList[i].code == "mach/maintain") {
                        itemChildList = itemList[i].children;
                    }
                }
            }
            for (let i = 0; i < itemChildList.length; i++) {
                if (itemChildList[i].code == "mach/maintain/record") {
                    this.mainTainFlag = true;
                    break;
                }
            }
        },
        getMaintainDetails(index, rows) {
            this.activeTabName = "0";
            let params = {
                maintainId: rows[index].maintainId,
            };
            getMachmaintainDetail(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.machId = res.data.machId;
                        this.machCode = res.data.machCode;
                        this.machTypeName = res.data.machTypeName;
                        this.itemList = res.data.itemList;
                        this.payList = res.data.payList;
                        this.payList.forEach((i, index) => {
                            this.payNumList[index] = 0;
                        });
                        for (let i = 0; i < this.itemPayList.length; i++) {
                            for (let j = 0; j < this.payList.length; j++) {
                                if (
                                    this.itemPayList[i].name ==
                                    this.payList[j].payName
                                ) {
                                    this.payNumList[i] =
                                        this.payList[j].payValue;
                                    if (
                                        this.payList[j].detail &&
                                        this.payList[j].detail != ""
                                    ) {
                                        // let str = this.payList[j].detail.replace(/[\\]/g,'');
                                        // str = str.replace(/\"/g, '');
                                        this.numMap[i] = JSON.parse(
                                            this.payList[j].detail
                                        );
                                    } else {
                                        this.numMap[i] = [];
                                    }
                                }
                            }
                        }
                        this.$forceUpdate();
                        this.payTotal = res.data.payTotal;
                        this.maintainUserName = res.data.maintainUserName;
                        this.maintainDate = res.data.maintainDate;
                        this.date = JSON.parse(
                            JSON.stringify(res.data.maintainDate)
                        );
                        this.workMile = res.data.workMile;
                        this.workHour = res.data.workHour;
                        this.maintainRemark = res.data.maintainRemark;
                        this.fileList = res.data.fileList;
                        this.detailsmaintainModal = true;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        maintainPageChange(index) {
            this.maintainPageNum = index;
            this.getMaintainList(this.detailsIndex, this.detailsRows);
        },
        getMaintainList(index, rows) {
            let params = {
                machId: rows[index].machId,
                pageNum: this.maintainPageNum,
                pageSize: this.maintainPageSize,
            };
            getMachmaintainListByMachID(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.maintainList = res.data.list;
                        for (let i = 0; i < this.maintainList.length; i++) {
                            this.maintainList[i].payList = this.transformList(
                                this.maintainList[i].payList
                            );
                        }
                        this.maintainTotalCount = res.data.total;
                        if (this.maintainList.length > 0) {
                            this.payList = this.maintainList[0].payList;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getCorpListFn() {
            let params = {
                deptId: this.porjectType,
            };
            getCorpList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        editFuelTank() {
            this.fuelTankFlag = false;
        },
        submitFuelTank() {
            let params = {
                machId: this.machId,
                oilTankVolume: this.oilTankVolume,
                oilTankHeight: this.oilTankHeight,
            };
            let num = /^[0-9]+.?[0-9]*$/;
            if (this.oilTankVolume == "" || this.oilTankVolume == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: " 油箱容积不能为空",
                });
                return;
            } else {
                if (!num.test(this.oilTankVolume)) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "请输入正确的油箱容积",
                    });
                    return;
                }
                if (this.oilTankVolume <= 0) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "油箱容积必须大于0",
                    });
                    return;
                }
                if (this.oilTankVolume > 9999) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "油箱容积必须小于10000",
                    });
                    return;
                }
            }
            if (this.oilTankHeight == "" || this.oilTankHeight == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: " 油箱高度不能为空",
                });
                return;
            } else {
                if (!num.test(this.oilTankHeight)) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "请输入正确的油箱高度",
                    });
                    return;
                }
                if (this.oilTankHeight <= 0) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "油箱高度必须大于0",
                    });
                    return;
                }
                if (this.oilTankHeight > 999) {
                    this.$Modal.warning({
                        title: "错误",
                        content: "油箱高度必须小于1000",
                    });
                    return;
                }
            }
            getEditMachTank_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.fuelTankFlag = true;
                        this.getDetails(this.detailsIndex, this.detailsRows, 2);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        beforeIMgUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        imgFirstSuccess(res, file) {
            this.imageFirstUrl = res.data.path;
            this.imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageThreeUrl,
                this.imageFourUrl,
                this.imageLastUrl,
            ];
            this.imgList = this.imgList.filter((v) => v);
            this.$Message.success("上传成功");
        },
        imgTwoSuccess(res, file) {
            this.imageTwoUrl = res.data.path;
            this.imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageLastUrl,
            ];
            this.imgList = this.imgList.filter((v) => v);
            this.$Message.success("上传成功");
        },
        imgThreeSuccess(res, file) {
            this.imageThreeUrl = res.data.path;
            this.imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageThreeUrl,
                this.imageFourUrl,
                this.imageLastUrl,
            ];
            this.imgList = this.imgList.filter((v) => v);
            this.$Message.success("上传成功");
        },
        imgFourSuccess(res, file) {
            this.imageFourUrl = res.data.path;
            this.imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageThreeUrl,
                this.imageFourUrl,
                this.imageLastUrl,
            ];
            this.imgList = this.imgList.filter((v) => v);
            this.$Message.success("上传成功");
        },
        imgLastSuccess(res, file) {
            this.imageLastUrl = res.data.path;
            this.imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageThreeUrl,
                this.imageFourUrl,
                this.imageLastUrl,
            ];
            this.imgList = this.imgList.filter((v) => v);
            this.$Message.success("上传成功");
        },
        removeImg(type) {
            if (type == 0) {
                this.imageFirstUrl = "";
            } else if (type == 1) {
                this.imageTwoUrl = "";
            } else if (type == 2) {
                this.imageThreeUrl = "";
            } else if (type == 3) {
                this.imageFourUrl = "";
            } else if (type == 4) {
                this.imageLastUrl = "";
            }
            let imgList = [
                this.imageFirstUrl,
                this.imageTwoUrl,
                this.imageThreeUrl,
                this.imageFourUrl,
                this.imageLastUrl,
            ];
            for (let i = 0; i < imgList.length; i++) {
                if (imgList[i]) {
                    if (i == 0) {
                        this.imageFirstUrl = imgList[i];
                    } else if (i == 1) {
                        this.imageTwoUrl = imgList[i];
                    } else if (i == 2) {
                        this.imageThreeUrl = imgList[i];
                    } else if (i == 3) {
                        this.imageFourUrl = imgList[i];
                    } else if (i == 4) {
                        this.imageLastUrl = imgList[i];
                    }
                }
            }
            imgList = imgList.filter((v) => v);
            this.imgList = imgList;
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传头像图片大小不能超过 2MB!");
            }
            return;
        },
        qrCodes(index, rows) {
            this.qrCodeName = rows[index].machCode;
            let params = {
                machId: rows[index].machId,
            };
            getMachQr_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.qrCodeSrc = res.data.path;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        downloadQRCode() {
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            let canvas = document.createElement("canvas");
            let name = this.qrCodeName;
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = this.qrCodeSrc;
        },
        getList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.porjectType,
                keyword: this.keyword,
                netState: this.netState,
                // machType: this.machType[1],
                /* machType: this.machType[this.machType.length - 1], */
                machType: this.machType || 13,
                // machTypeId: this.machType[this.machType.length - 1],
                workState: this.workState,
                bindFlag: this.bindFlag,
                state: this.state,
                corpId: this.corpId,
            };
            getMachList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        for (let i in this.list) {
                            let operEmpNameStr = [];
                            for (let j in this.list[i].operEmpList) {
                                operEmpNameStr.push(
                                    this.list[i].operEmpList[j].operEmpName
                                );
                                this.list[i]["operEmpName"] =
                                    operEmpNameStr.join(",");
                            }
                        }
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取设备类型
        getMachTypeList() {
            getMachTypeGetList_V1()
                .then((res) => {
                    if (res.code == 200) {
                        // 老版级联选择器 数据处理
                        /* this.arr = res.data.list;
                        for (let i in this.arr) {
                            this.arr[i].value = this.arr[i].machTypeId;
                            this.arr[i].label = this.arr[i].machTypeName;
                            delete this.arr[i].pid;
                            delete this.arr[i].machTypeName;
                            for (let j in this.arr[i].children) {
                                this.arr[i].children[j].value =
                                    this.arr[i].children[j].machTypeId;
                                this.arr[i].children[j].label =
                                    this.arr[i].children[j].machTypeName;
                                delete this.arr[i].children[j].machTypeId;
                                delete this.arr[i].children[j].machTypeName;
                            }
                        } */
                        // 新版级联选择器 数据处理
                        /* // 先过滤出符合条件的项，再统一处理结构
                        this.arr = (res.data.list || []).filter(item =>
                            item.machTypeCode === 'tezhongshebei'
                        ).map(item => {
                            // 处理父项
                            const processedItem = {
                                ...item,
                                value: item.machTypeId,
                                label: item.machTypeName
                            };
                            // 删除父项中不需要的字段
                            delete processedItem.pid;
                            delete processedItem.machTypeId;
                            delete processedItem.machTypeName;

                            // 处理子项（确保children是数组，避免报错）
                            if (Array.isArray(processedItem.children)) {
                                processedItem.children = processedItem.children.map(child => {
                                const processedChild = {
                                    ...child,
                                    value: child.machTypeId,
                                    label: child.machTypeName
                                };
                                delete processedChild.machTypeId;
                                delete processedChild.machTypeName;
                                return processedChild;
                                });
                            }

                            return processedItem;
                        });
                        console.log(this.arr); */


                        // 处理为普通选择器格式，父选项作为默认值
                        this.arr = [];
                        const list = res.data.list || [];

                        // 先过滤出符合条件的父项
                        const parentItems = list.filter(item =>
                            item.machTypeCode === 'tezhongshebei'
                        );

                        // 处理父项并添加到选项中（作为默认选项）
                        parentItems.forEach(parent => {
                            /* // 处理父项结构
                            const processedParent = {
                                value: parent.machTypeId,
                                label: parent.machTypeName,
                                isParent: true  // 父项标识
                            };
                            this.arr.push(processedParent); */

                            // 处理子项并添加到选项中
                            if (Array.isArray(parent.children)) {
                                parent.children.forEach(child => {
                                    const processedChild = {
                                        value: child.machTypeId,
                                        label: child.machTypeName,
                                        isParent: false  // 子项标识
                                    };
                                    this.arr.push(processedChild);
                                });
                            }
                        });

                        console.log(this.arr);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        pageChange(index) {
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            if (this.netState == undefined) {
                this.netState = "";
            }
            if (this.machType == undefined) {
                // this.machType = [];
                this.machType = 13;
            }
            if (this.workState == undefined) {
                this.workState = "";
            }
            if (this.bindFlag == undefined) {
                this.bindFlag = "";
            }
            if (this.state == undefined) {
                this.state = "";
            }
            this.pageNum = index;
            this.getList();
        },
        getEnterTime(index) {
            this.mach.enterTime = index;
            this.enterTimeOptions = {
                disabledDate: (date) => {
                    let enterTime = this.enterTime
                        ? new Date(this.enterTime).getTime() - 86400000
                        : "";
                    return date && date.valueOf() < enterTime;
                    // return date > Date.now();
                },
            };
            this.deliveryTimeOptions = {
                disabledDate: (date) => {
                    let enterTime = this.enterTime
                        ? new Date(this.enterTime).getTime()
                        : "";
                    return date && date.valueOf() > enterTime;
                    // return date > Date.now();
                },
            };
        },
        getOuterTime(index) {
            this.mach.outerTime = index;
            this.outerTimeOptions = {
                disabledDate: (date) => {
                    let outerTime = this.mach.outerTime
                        ? new Date(this.mach.outerTime).valueOf() - 86400000
                        : "";
                    return date && date.valueOf() < outerTime;
                },
            };
        },
        getDeliveryTime(index) {
            this.mach.deliveryTime = index;
            this.outerTimeOptions = {
                disabledDate: (date) => {
                    let deliveryTime = this.mach.deliveryTime
                        ? new Date(this.mach.deliveryTime).valueOf() - 86400000
                        : "";
                    return date && date.valueOf() < deliveryTime;
                },
            };
        },
        getnetState(index) {
            this.netState = index;
        },
        getmachTypes(index) {
            console.log(index)
            this.machType = index;
        },
        handleChange(index) {
            let selectedOptions = [];
            index.forEach((v) => {
                selectedOptions.push(Number(v));
            });
            this.selectedOptions = selectedOptions;
            let o = [];
            let s = [];
            console.log('this.arr', this.arr)
            for (let i in this.arr) {
                if (this.selectedOptions[0] == this.arr[i].value) {
                    o = this.arr[i].children;

                    s = this.arr[i].children;
                    this.mach.machTypeName = this.arr[i].label;
                    console.log('this.arr[i].label', this.arr[i].label)
                }
            }
            /* for (let i in o) {
                if (this.selectedOptions[1] == o[i].value) {
                    s = o[i].children;
                    this.mach.machTypeName = o[i].label;
                }
            } */
            console.log('this.selectedOptions', this.selectedOptions)
        },
        //添加操作手职位
        addOperEmp() {
            let obj = {};
            this.operEmpList.push(obj);
        },
        // 删除操作手职位
        removeOperEmp(index) {
            this.operEmpList.splice(index, 1);
        },
        getCorpIdtype(index) {
            this.mach.corpId = index;
            this.corpList.forEach((v) => {
                if (v.corpId == index) {
                    this.mach.corpName = v.corpName;
                }
            });
        },
        getworkState(index) {
            this.workState = index;
        },
        getprojectId(index) {
            this.projectId = index;
            this.s = [];
            this.v = [];
            for (let i of this.deptIdList) {
                if (i.pid == index) {
                    this.s.push(i);
                }
            }
        },
        getareaId(index) {
            this.areaId = index;
            this.v = [];
            for (let i of this.deptIdList) {
                if (i.pid == index) {
                    this.v.push(i);
                }
            }
            if (this.s.length == 0) {
                this.v = [];
            }
        },
        getbindFlag(index) {
            this.bindFlag = index;
        },
        getCorpFn(index) {
            this.corpId = index;
        },
        getstateFlag(index) {
            this.state = index;
        },
        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            if (this.netState == undefined) {
                this.netState = "";
            }
            if (this.machType == undefined) {
                // this.machType = [];
                this.machType = 13;
            }
            if (this.workState == undefined) {
                this.workState = "";
            }
            if (this.bindFlag == undefined) {
                this.bindFlag = "";
            }
            if (this.state == undefined) {
                this.state = "";
            }
            this.getList();
        },
        clear() {
            this.pageNum = 1;
            this.current = 1;
            this.keyword = "";
            this.netState = "";
            // this.machType = [];
            this.machType = 13;
            this.workState = "";
            this.bindFlag = "";
            this.state = "";
            this.corpId = "";
            this.getList();
        },
        updateRow() {
            this.modal = true;
            this.mach = {};
            this.mach_machType = "";
            this.mach_machBrand = "";
            this.mach_machModel = "";
            this.imageFirstUrl = "";
            this.imageTwoUrl = "";
            this.imageLastUrl = "";
            this.imageThreeUrl = "";
            this.imageFourUrl = "";
            this.selectedOptions = [];
            this.operEmpList = [];
            this.imgList = [];
            this.enterTime = new Date();
            this.assetCode = "";
            this.deliveryCode = "";
            this.partName = "";
            this.manufacturer = "";
        },
        submitAll() {
            let enterTime, outerTime, deliveryTime;
            enterTime = this.initDate(this.enterTime);
            if (this.mach.outerTime && this.mach.outerTime != "NaN-NaN-NaN") {
                outerTime = this.initDate(this.mach.outerTime);
            } else {
                outerTime = "";
            }
            if (
                this.mach.deliveryTime &&
                this.mach.deliveryTime != "NaN-NaN-NaN"
            ) {
                deliveryTime = this.initDate(this.mach.deliveryTime);
            } else {
                deliveryTime = "";
            }
            if (this.mach.machCode == undefined || this.mach.machCode == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备编号不能为空",
                });
                return;
            }
            if (this.selectedOptions.length == 0) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备类型不能为空",
                });
                return;
            }
            if (this.operEmpList.length > 3) {
                this.$Modal.warning({
                    title: "提示",
                    content: "最多只能上传三条操作手数据",
                });
                return;
            }
            if (this.operEmpList.length > 0) {
                for (let i in this.operEmpList) {
                    if (
                        this.operEmpList[i].operEmpCert == "" ||
                        this.operEmpList[i].operEmpName == "" ||
                        this.operEmpList[i].operEmpCert == undefined ||
                        this.operEmpList[i].operEmpName == undefined
                    ) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "操作手姓名或操作手证书不能为空",
                        });
                        return;
                    }
                    if (this.operEmpList[i].phone != "") {
                        if (
                            !/^1[3456789]\d{9}$/.test(this.operEmpList[i].phone)
                        ) {
                            this.$Modal.warning({
                                title: "您有必填提示字段",
                                content: "请填写正确的操作手手机号",
                            });
                            return;
                        }
                    }
                }
            }
            let imgList = this.imgList.filter((v) => v);
            if (this.isAdd) {
                let params = {
                    corpId: this.mach.corpId,
                    corpName: this.mach.corpName,
                    enterTime: enterTime,
                    deliveryTime: deliveryTime,
                    deptId: this.porjectType,
                    machCode: this.mach.machCode,
                    /* machType: this.selectedOptions[1], */
                    machType: this.selectedOptions[this.selectedOptions.length - 1],
                    machModelName: this.mach.machModelName,
                    machTypeName: this.mach.machTypeName,
                    operEmpList: this.operEmpList,
                    totalWorkHours: this.mach.totalWorkHours,
                    imgList: imgList,
                    assetCode: this.assetCode,
                    deliveryCode: this.deliveryCode,
                    partName: this.partName,
                    manufacturer: this.manufacturer,
                };
                getMachAdd_V1(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                let params = {
                    machId: this.machId,
                    machCode: this.mach.machCode,
                    /* machType: this.selectedOptions[1], */
                    machType: this.selectedOptions[this.selectedOptions.length - 1],
                    machModelName: this.mach.machModelName,
                    machTypeName: this.mach.machTypeName,
                    corpId: this.mach.corpId,
                    corpName: this.mach.corpName,
                    enterTime: enterTime,
                    deliveryTime: deliveryTime,
                    outerTime: outerTime,
                    deptId: this.porjectType,
                    operEmpList: this.operEmpList,
                    totalWorkHours: this.mach.totalWorkHours,
                    imgList: imgList,
                    assetCode: this.assetCode,
                    deliveryCode: this.deliveryCode,
                    partName: this.partName,
                    manufacturer: this.manufacturer,
                };
                getMachEdit_V1(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        },
        success() {
            this.$Message.success("操作成功");
            if (this.isAdd) {
                this.modal = false;
                this.keyword = "";
                this.netState = "";
                // this.machType = [];
                this.machType = 13;
                this.workState = "";
                this.bindFlag = "";
                this.corpId = "";
            } else {
                this.isAdd = !this.isAdd;
                this.getDetails(this.detailsIndex, this.detailsRows, 1);
            }
            this.getList();
        },
        cancel(type) {
            if (type == 1) {
                this.modal = false;
            } else if (type == 2) {
                this.boundModal = false;
            } else if (type == 4) {
                this.deleteModal = false;
            } else if (type == 5) {
                this.unbindModal = false;
            } else if (type == 6) {
                this.enterModal = false;
            } else if (type == 7) {
                this.outerModal = false;
            } else if (type == 8) {
                this.isAdd = true;
                this.getDetails(this.detailsIndex, this.detailsRows, 2);
            } else if (type == 9) {
                this.snFlag = 1;
            } else if (type == 10) {
                this.fuelTankFlag = true;
                this.oilTankVolume = this.detailsObj.oilTankVolume;
                this.oilTankHeight = this.detailsObj.oilTankHeight;
            }
        },
        //进场
        enter(index, rows) {
            this.enterId = rows[index].machId;
            this.enterModal = true;
        },
        enterSumbit() {
            getMachEnter_V1(this.enterId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.enterModal = false;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //退场
        outer(index, rows) {
            if (rows[index].bindFlag == 1) {
                this.$Message.warning("请您先解绑设备硬件");
                return;
            }
            this.outerId = rows[index].machId;
            this.outerModal = true;
        },
        outerSumbit() {
            getMachOuter_V1(this.outerId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.outerModal = false;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //查看详情
        getDetails(index, rows, type) {
            if (type == 1) {
                this.detailActiveName = "1";
                this.qrCodes(index, rows);
            }

            this.isAdd = true;
            this.detailsModal = true;
            this.detailsIndex = index;
            this.getMaintainList(index, rows);
            this.operEmpList = [];
            this.machId = rows[index].machId;
            this.snCode = rows[index].sn;
            this.detailsRows = rows;
            let params = {
                machId: rows[index].machId,
            };
            getMachInfo_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.imgList = [];
                        this.selectedOptions = [
                            res.data.subMachType,
                            res.data.machType,
                        ];
                        this.mach.machCode = res.data.machCode;
                        this.enterTime = res.data.enterTime;
                        this.mach.deliveryTime = res.data.deliveryTime || "";
                        this.mach.outerTime = res.data.outerTime || "";
                        this.mach.corpId = res.data.corpId;
                        this.mach.corpName = res.data.corpName;
                        this.mach.totalWorkHours = res.data.totalWorkHours;
                        this.operEmpList = res.data.operEmpList;
                        this.mach.machModelName = res.data.machModelName;
                        this.mach.machTypeName = res.data.machTypeName;
                        this.imgList = res.data.imgList;
                        this.imageFirstUrl = this.imgList[0] || "";
                        this.imageTwoUrl = this.imgList[1] || "";
                        this.imageThreeUrl = this.imgList[2] || "";
                        this.imageFourUrl = this.imgList[3] || "";
                        this.imageLastUrl = this.imgList[4] || "";

                        this.stateFlag = res.data.state;
                        this.qrCodeName = res.data.machCode;
                        this.assetCode = res.data.assetCode;
                        this.deliveryCode = res.data.deliveryCode;
                        this.partName = res.data.partName;
                        this.manufacturer = res.data.manufacturer;
                        if (this.mach.deliveryTime && this.mach.outerTime) {
                            this.outerTimeOptions = {
                                disabledDate: (date) => {
                                    this.mach.outerTime = this.initDate(
                                        this.mach.outerTime
                                    );
                                    let outerTime = this.mach.outerTime
                                        ? new Date(
                                              this.mach.outerTime
                                          ).valueOf() - 86400000
                                        : "";
                                    return date && date.valueOf() < outerTime;
                                },
                            };
                        } else if (this.mach.outerTime) {
                            this.outerTimeOptions = {
                                disabledDate: (date) => {
                                    this.mach.outerTime = this.initDate(
                                        this.mach.outerTime
                                    );
                                    let outerTime = this.mach.outerTime
                                        ? new Date(
                                              this.mach.outerTime
                                          ).valueOf() + 86400000
                                        : "";
                                    return date && date.valueOf() < outerTime;
                                },
                            };
                        } else if (this.mach.deliveryTime) {
                            this.outerTimeOptions = {
                                disabledDate: (date) => {
                                    this.mach.deliveryTime = this.initDate(
                                        this.mach.deliveryTime
                                    );
                                    let deliveryTime = this.mach.deliveryTime
                                        ? new Date(
                                              this.mach.deliveryTime
                                          ).valueOf() - 86400000
                                        : "";
                                    return (
                                        date && date.valueOf() < deliveryTime
                                    );
                                },
                            };
                        }
                        this.enterTimeOptions = {
                            disabledDate: (date) => {
                                this.enterTime = this.initDate(this.enterTime);
                                let enterTime = this.enterTime
                                    ? new Date(this.enterTime).getTime() -
                                      86400000
                                    : "";
                                return date && date.valueOf() < enterTime;
                            },
                        };
                        this.deliveryTimeOptions = {
                            disabledDate: (date) => {
                                this.enterTime = this.initDate(this.enterTime);
                                let enterTime = this.enterTime
                                    ? new Date(this.enterTime).getTime() - 28800
                                    : "";
                                return date && date.getTime() > enterTime;
                            },
                        };
                        this.detailsObj = res.data;
                        this.detailsOperEmpList = res.data.operEmpList;
                        this.oilTankVolume = res.data.oilTankVolume;
                        this.oilTankHeight = res.data.oilTankHeight;
                        this.detailsObj.imgList =
                            this.detailsObj.imgList.filter((v) => v);
                        if (this.detailsObj.imgList.length == 0) {
                            this.detailsObj.imgList.push(
                                require("../../assets/images/mach/list/mach_none.png")
                            );
                        }
                        if (res.data.sn) {
                            if (!res.data.sn) {
                                this.sn = "-";
                                this.snFlag = 1;
                            } else {
                                this.sn = res.data.sn;
                                this.snFlag = 3;
                            }
                        } else {
                            this.sn = "-";
                            this.snFlag = 1;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        edit_btn() {
            this.isAdd = false;
        },
        //多选
        listSelectOne(selection, row) {
            this.machList = selection;
        },
        //全选
        listSelectALL(selection) {
            this.machList = selection;
        },
        getAllexport() {
            getMachExport_V1(this.porjectType)
                .then((res) => {
                    if (res.code == 200) {
                        window.open(res.data.path);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        boundFn(index, rows) {
            this.bound_sn = "";
            this.snFlag = 2;
            // this.boundModal = true;
            this.boundId = this.machId;
        },
        unbindFn(index, rows) {
            this.unbindId = this.machId;
            this.unbindModal = true;
        },
        unbind() {
            getMachUnBind_V1(this.unbindId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.unbindModal = false;
                        this.getDetails(this.detailsIndex, this.detailsRows, 2);
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        boundSumbit() {
            if (this.bound_sn == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入设备SN码",
                });
                return;
            }
            let params = {
                machId: this.boundId,
                sn: this.bound_sn,
            };
            getMachBind_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getDetails(this.detailsIndex, this.detailsRows, 2);
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        remove(index, rows) {
            this.deleteModal = true;
            this.removeid = rows[index].machId;
        },
        detele() {
            getMachRemove_V1(this.removeid)
                .then((res) => {
                    if (res.code == 200) {
                        this.deleteModal = false;
                        this.$Message.success("操作成功");
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        initDate(time) {
            let myDate = new Date(time);
            let year = myDate.getFullYear();
            let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let day = myDate.getDate(); //获取当前日（1-31）
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }

            return year + "-" + month + "-" + day;
        },
    },
    mounted() {
        this.porjectType = this.$store.state.porjectObject.deptId;
        this.porjectName = this.$store.state.porjectObject.name;
        this.getList();
        this.getMachTypeList();
        this.getCorpListFn();
        this.getCode();
        this.getDictList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.machProductName = localStorage.getItem("dzh_machProductName");
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectType = val.deptId;
                this.porjectName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.keyword = "";
                this.netState = "";
                // this.machType = [];
                this.machType = 13;
                this.workState = "";
                this.bindFlag = "";
                this.state = "";
                this.corpId = "";
                this.machList = [];
                this.getMachTypeList();
                this.getCorpListFn();
                this.getList();
                this.getDictList();
            }
        },
        imgList(val, oldVal) {
            if (val.length == 3) {
                this.imgFlag = true;
            } else {
                this.imgFlag = false;
            }
        },
        activeTabName(val, oldval) {
            this.tableList = ["数量", "单价", "总价", "备注"];
            let list = [];
            this.itemPayList.forEach((i) => {
                if (val == i.code) {
                    list = [...i.remark, ...this.tableList];
                }
                i["details"] = list;
            });
        },
    },
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/mach.less";
@import "./../../assets/style/modal.less";
h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
}
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .search {
        width: 100%;
        margin-bottom: 10px;
        background: #fff;
        padding: 0 20px;
        padding-top: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        .search_item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .list {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 50px;
            padding-bottom: 20px;
            span {
                width: 80px;
            }
        }
    }
    .tabBox {
        width: 100%;
        height: calc(100% - 138px);
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        .down {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
        }
        .tableList {
            width: 100%;
            height: 520px;
            overflow-y: scroll;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .item {
                position: relative;
                width: 24%;
                height: 205px;
                background: #ffffff;
                border-radius: 3px;
                box-sizing: border-box;
                cursor: pointer;
                margin-right: 1.3%;
                margin-bottom: 1.3%;
                border: 1px solid var(--themeColor);
                overflow: hidden;
                &:nth-of-type(4n) {
                    margin-right: 0;
                }
                .top {
                    width: 100%;
                    height: 43px;
                    border-radius: 3px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 40px;
                    box-sizing: border-box;
                    .top_item {
                        flex: 1;
                        height: 100%;
                        line-height: 43px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-bottom: 1px solid #e5e5e5;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        img {
                            width:20px;
                            height:20px;
                            margin-right: 8px;
                        }
                    }
                }
                .bottom {
                    position: relative;
                    width: 100%;
                    height: 175px;
                    padding: 10px 16px 16px 5px;
                    box-sizing: border-box;
                    .box {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin: auto;
                        .left {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 160px;
                            height: 134px;
                            margin-right: 10px;
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                            .imgNone {
                                width: 180px;
                                height: 110px;
                            }
                        }
                        .right {
                            flex: 1;
                            p {
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                margin-bottom: 10px;
                                &:last-of-type {
                                    margin-bottom: 0;
                                }
                                span {
                                    font-family: MicrosoftYaHei;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    font-size: 12px;
                                    &:first-of-type {
                                        width: 90px;
                                        font-weight: 400;
                                        color: #181818;
                                    }
                                    &:last-of-type {
                                        width: 150px;
                                        font-weight: 400;
                                        color: #58595a;
                                    }
                                }
                            }
                        }
                    }
                }
                .footer {
                    width: 100%;
                    position: absolute;
                    bottom: -46px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-top: 1px solid var(--themeColor);
                    padding: 10px 20px;
                    box-sizing: border-box;
                    background-color: #fff;
                    z-index: 10;
                }
                &:hover {
                    .footer {
                        bottom: 0;
                        box-shadow: 0px 7px 9px 5px rgba(0, 0, 0, 0.3);
                        transition: all 0.5s ease-in-out;
                    }
                }
            }
            &::-webkit-scrollbar {
                width: 6px;
            }
        }
        .no_lsit {
            width: 96%;
            margin: auto;
            text-align: center;
            img {
                width: 500px;
            }
        }
    }
    /deep/.btn {
        .el-button:hover {
            background-color: var(--themeColor) !important;
            .text {
                color: #f0f9fe !important;
            }
        }
    }
}
</style>

